package spring.lottery.common.pojo;


public class VerificationCodeHtml {
    String html = """
            <!DOCTYPE html>
            <html lang="zh-CN">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>hadagedelottery 验证码</title>
                <style>
                    /* 基础样式兼容邮件客户端 */
                    body, table, td {
                        font-family: Arial, Helvetica, sans-serif;
                        -webkit-text-size-adjust: 100%;
                        -ms-text-size-adjust: 100%;
                        margin: 0;
                        padding: 0;
                    }
                   \s
                    /* 使用内联CSS样式确保在邮件客户端中显示 */
                    .container {
                        width: 100%;
                        max-width: 600px;
                        margin: 0 auto;
                        background-color: #ffffff;
                        border-radius: 8px;
                        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                        overflow: hidden;
                    }
                   \s
                    .header {
                        background-color: #000000;
                        color: #ffffff;
                        padding: 15px 20px;
                        text-align: center;
                    }
                   \s
                    .app-info {
                        padding: 20px;
                        text-align: center;
                        border-bottom: 1px solid #f0f0f0;
                    }
                   \s
                    .content {
                        padding: 30px;
                        text-align: center;
                    }
                   \s
                    .code-display {
                        font-size: 42px;
                        font-weight: bold;
                        letter-spacing: 8px;
                        color: #e74c3c;
                        margin: 20px 0;
                        padding: 15px;
                        background: linear-gradient(to right, #f9f9f9, #fff);
                        border-radius: 8px;
                        border: 1px solid #f1c40f;
                        display: inline-block;
                        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
                    }
                   \s
                    .timer-section {
                        margin: 25px 0;
                        font-size: 18px;
                        color: #333;
                    }
                   \s
                    .timer {
                        font-weight: bold;
                        color: #e74c3c;
                    }
                   \s
                    .warning {
                        background-color: #fffde7;
                        border-left: 4px solid #f1c40f;
                        padding: 15px;
                        margin: 20px 0;
                        text-align: left;
                        border-radius: 0 4px 4px 0;
                    }
                   \s
                    .footer {
                        padding: 20px;
                        color: #7f8c8d;
                        font-size: 12px;
                        text-align: center;
                        border-top: 1px solid #f0f0f0;
                        background-color: #f9f9f9;
                    }
                   \s
                    .logo {
                        font-size: 28px;
                        font-weight: bold;
                        background: linear-gradient(45deg, #ff5722, #e91e63);
                        color: white;
                        width: 50px;
                        height: 50px;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 10px;
                        margin-bottom: 15px;
                    }
                   \s
                    .app-title {
                        font-size: 24px;
                        font-weight: bold;
                        color: #333;
                        margin-bottom: 10px;
                    }
                   \s
                    .email-info {
                        color: #7f8c8d;
                        font-size: 14px;
                        margin-bottom: 25px;
                    }
                   \s
                    .emoji {
                        font-size: 28px;
                        margin: 15px 0;
                    }
                   \s
                    /* 为兼容邮件客户端，使用简单的颜色变化代替动画 */
                    .timing {
                        animation: pulse 2s infinite;
                        display: inline-block;
                    }
                   \s
                    @keyframes pulse {
                        0% { transform: scale(1); }
                        50% { transform: scale(1.1); }
                        100% { transform: scale(1); }
                    }
                   \s
                    /* 移动端适配 */
                    @media screen and (max-width: 600px) {
                        .container {
                            border-radius: 0;
                            box-shadow: none;
                        }
                       \s
                        .code-display {
                            font-size: 32px;
                            letter-spacing: 6px;
                            padding: 12px;
                        }
                       \s
                        .content {
                            padding: 20px 15px;
                        }
                    }
                </style>
            </head>
            <body>
                <table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#f5f5f5" style="background-color: #f5f5f5;">
                    <tr>
                        <td align="center" valign="top">
                            <!-- 容器 -->
                            <table class="container" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff">
                                <!-- 顶部头 -->
                                <tr>
                                    <td class="header">
                                        你正在登录hadagedelottery • langdeyx2333@163.com • 2025-06-16 15:13
                                    </td>
                                </tr>
                               \s
                                <!-- 应用信息 -->
                                <tr>
                                    <td class="app-info">
                                        <div class="logo">H</div>
                                        <div class="app-title">hadagedelottery</div>
                                        <div class="email-info">发至 %%s2 详情</div>
                                    </td>
                                </tr>
                               \s
                                <!-- 主要内容 -->
                                <tr>
                                    <td class="content">
                                        <h2 style="color: #e67e22; margin-bottom: 10px;">您的神秘验证码</h2>
                                        <p style="color: #7f8c8d; margin-bottom: 20px;">一条神秘代码正等待您的注意!</p>
                                       \s
                                        <!-- 验证码显示 -->
                                        <div class="code-display">
                                            %%s1
                                        </div>
                                       \s
                                        <!-- 倒计时 -->
                                        <div class="timer-section">
                                            魔法消失倒计时: <span class="timer timing">60秒</span>
                                        </div>
                                       \s
                                        <!-- 字符表情 -->
                                        <div class="emoji">(0'<')'△')σ</div>
                                       \s
                                        <!-- 安全警告 -->
                                        <div class="warning">
                                            <p style="margin-bottom: 5px;"><strong>安全警告</strong></p>
                                            <p>禁止将此代码透露给披萨外卖员或可疑的独角兽</p>
                                        </div>
                                       \s
                                        <!-- 说明 -->
                                        <div style="color: #7f8c8d; margin: 25px 0;">
                                            <p>请将此代码输入到您要验证的地方，不然它可能会离家出走</p>
                                            <p style="font-size: 14px; margin-top: 10px;">验证码:60秒后自动销毁!</p>
                                        </div>
                                    </td>
                                </tr>
                               \s
                                <!-- 页脚 -->
                                <tr>
                                    <td class="footer">
                                        © 2025 hadagedelottery • 由魔法小猫提供技术支持
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </body>
            </html>
            """;

    @Override
    public String toString() {
        return html;
    }
}
